<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公益项目 - 绿能智链</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <!-- AMap (高德地图) API -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=73932d45f3704e0d4a780df26b5ac63c"></script>
    <style>
        /* Custom font for better look */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f7f8fa;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        /* Map container styling */
        #map {
            height: 100%;
            width: 100%;
        }
        /* Horizontal scrollable cards container */
        .scroll-container {
            display: flex;
            overflow-x: auto;
            gap: 1rem;
            padding: 1rem;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scroll-container::-webkit-scrollbar {
            display: none;
        }
        .card {
            flex: 0 0 auto;
            width: 80vw;
            max-width: 300px;
        }
        /* Green theme styling */
        .green-bg {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
        .green-text {
            color: #059669;
        }
        .green-border {
            border-color: #10b981;
        }
        /* Fixed bottom tab bar */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }
        /* Add padding to main content to avoid being covered by tab bar */
        main {
            padding-bottom: 60px;
        }
    </style>
</head>
<body class="bg-white">
    <div class="w-full h-full flex flex-col">
        <!-- Header -->
        <header class="flex-shrink-0 bg-white px-4 py-3 flex items-center justify-between shadow-sm">
            <button onclick="window.history.back()" class="text-gray-600">
                <i class="fas fa-arrow-left text-xl"></i>
            </button>
            <h1 class="text-lg font-bold text-gray-800">公益项目</h1>
            <div class="w-6"></div> <!-- Placeholder for alignment -->
        </header>

        <!-- Main Content -->
        <main class="flex-grow overflow-y-auto">
            <!-- Top Section -->
            <div class="p-4 bg-white">
                <div class="flex items-center justify-between">
                    <h2 class="text-2xl font-bold text-gray-900">NFT公益贡献</h2>
                    <div class="flex items-center space-x-2 text-sm text-gray-500">
                        <span>绿能智链</span>
                        <i class="fas fa-chevron-right text-xs"></i>
                    </div>
                </div>
                <p class="text-gray-600 mt-2">将您的NFT收益权贡献给公益碳减排项目，共同守护地球家园</p>
            </div>

            <!-- Contribution Summary -->
            <div class="px-4 pb-4">
                <div class="green-bg rounded-2xl p-4 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm opacity-90">我的NFT收益权</p>
                            <p class="text-2xl font-bold">1,250 ETH</p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm opacity-90">已贡献</p>
                            <p class="text-2xl font-bold">320 ETH</p>
                        </div>
                    </div>
                    <div class="mt-3 bg-white bg-opacity-20 rounded-full h-2">
                        <div class="bg-white h-2 rounded-full" style="width: 25.6%"></div>
                    </div>
                    <p class="text-xs mt-1 opacity-75">已贡献25.6%的NFT收益权</p>
                </div>
            </div>

            <!-- Charity Project Cards -->
            <div class="px-4 pb-4">
                <h3 class="text-lg font-bold text-gray-800 mb-2">热门公益项目</h3>
                <div class="scroll-container">
                    <!-- Card 1 -->
                    <div class="card rounded-2xl overflow-hidden shadow-lg bg-white relative">
                        <img src="https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=900&auto=format&fit=crop&q=60" alt="森林保护" class="w-full h-32 object-cover">
                        <div class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">森林保护</div>
                        <div class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full">85%</div>
                        <div class="p-3">
                            <h4 class="font-bold text-gray-800 mb-1">云南热带雨林保护</h4>
                            <p class="text-xs text-gray-500 mb-2">预计年减排: 50,000吨CO₂</p>
                            <button onclick="contributeToProject('forest')" class="w-full green-bg text-white font-bold py-2 rounded-lg text-sm">贡献收益权</button>
                        </div>
                    </div>
                    <!-- Card 2 -->
                    <div class="card rounded-2xl overflow-hidden shadow-lg bg-white relative">
                        <img src="https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=900&auto=format&fit=crop&q=60" alt="清洁能源" class="w-full h-32 object-cover">
                        <div class="absolute top-2 left-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full">清洁能源</div>
                        <div class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">92%</div>
                        <div class="p-3">
                            <h4 class="font-bold text-gray-800 mb-1">西北风电场建设</h4>
                            <p class="text-xs text-gray-500 mb-2">预计年减排: 120,000吨CO₂</p>
                            <button onclick="contributeToProject('wind')" class="w-full green-bg text-white font-bold py-2 rounded-lg text-sm">贡献收益权</button>
                        </div>
                    </div>
                    <!-- Card 3 -->
                    <div class="card rounded-2xl overflow-hidden shadow-lg bg-white relative">
                        <img src="https://images.unsplash.com/photo-1547394765-185e1e68f34e?w=900&auto=format&fit=crop&q=60" alt="海洋保护" class="w-full h-32 object-cover">
                        <div class="absolute top-2 left-2 bg-cyan-500 text-white text-xs px-2 py-1 rounded-full">海洋保护</div>
                        <div class="absolute top-2 right-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">78%</div>
                        <div class="p-3">
                            <h4 class="font-bold text-gray-800 mb-1">南海珊瑚礁修复</h4>
                            <p class="text-xs text-gray-500 mb-2">预计年减排: 35,000吨CO₂</p>
                            <button onclick="contributeToProject('ocean')" class="w-full green-bg text-white font-bold py-2 rounded-lg text-sm">贡献收益权</button>
                        </div>
                    </div>
                    <!-- Card 4 -->
                    <div class="card rounded-2xl overflow-hidden shadow-lg bg-white relative">
                        <img src="https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?w=900&auto=format&fit=crop&q=60" alt="农业减排" class="w-full h-32 object-cover">
                        <div class="absolute top-2 left-2 bg-amber-600 text-white text-xs px-2 py-1 rounded-full">农业减排</div>
                        <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">65%</div>
                        <div class="p-3">
                            <h4 class="font-bold text-gray-800 mb-1">东北黑土保护</h4>
                            <p class="text-xs text-gray-500 mb-2">预计年减排: 28,000吨CO₂</p>
                            <button onclick="contributeToProject('agriculture')" class="w-full green-bg text-white font-bold py-2 rounded-lg text-sm">贡献收益权</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Map Section -->
            <div class="px-4 pb-4">
                <h3 class="text-lg font-bold text-gray-800 mb-2">全国公益项目地图</h3>
                <div class="rounded-2xl overflow-hidden h-96 bg-gray-200 relative">
                    <!-- AMap container -->
                    <div id="map"></div>
                    <!-- <div class="absolute bottom-4 left-4 right-4 bg-white p-3 rounded-xl shadow-lg flex items-center space-x-3">
                        <div class="w-12 h-12 bg-cover bg-center rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?q=80&w=1974&auto=format&fit=crop')"></div>
                        <div class="flex-grow">
                            <h4 class="font-bold text-gray-800">云南热带雨林保护</h4>
                            <p class="text-sm text-gray-500">进度: 85% | 参与人数: 1,234</p>
                        </div>
                        <button onclick="navigateToProject('forest')" class="green-bg text-white px-4 py-2 rounded-lg font-semibold">查看详情</button>
                    </div> -->
                </div>
            </div>

            <!-- Statistics Section -->
            <div class="px-4 pb-4">
                <h3 class="text-lg font-bold text-gray-800 mb-2">公益贡献统计</h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-green-50 rounded-xl p-3">
                        <div class="flex items-center justify-between">
                            <i class="fas fa-leaf text-green-500 text-xl"></i>
                            <span class="text-xs text-green-600 font-semibold">+12.5%</span>
                        </div>
                        <p class="text-2xl font-bold text-gray-800 mt-1">2.5万吨</p>
                        <p class="text-xs text-gray-500">累计碳减排</p>
                    </div>
                    <div class="bg-blue-50 rounded-xl p-3">
                        <div class="flex items-center justify-between">
                            <i class="fas fa-users text-blue-500 text-xl"></i>
                            <span class="text-xs text-blue-600 font-semibold">+8.3%</span>
                        </div>
                        <p class="text-2xl font-bold text-gray-800 mt-1">15,678</p>
                        <p class="text-xs text-gray-500">参与用户</p>
                    </div>
                    <div class="bg-amber-50 rounded-xl p-3">
                        <div class="flex items-center justify-between">
                            <i class="fas fa-hand-holding-heart text-amber-500 text-xl"></i>
                            <span class="text-xs text-amber-600 font-semibold">+15.2%</span>
                        </div>
                        <p class="text-2xl font-bold text-gray-800 mt-1">8,920 ETH</p>
                        <p class="text-xs text-gray-500">总贡献收益权</p>
                    </div>
                    <div class="bg-purple-50 rounded-xl p-3">
                        <div class="flex items-center justify-between">
                            <i class="fas fa-project-diagram text-purple-500 text-xl"></i>
                            <span class="text-xs text-purple-600 font-semibold">+5</span>
                        </div>
                        <p class="text-2xl font-bold text-gray-800 mt-1">42</p>
                        <p class="text-xs text-gray-500">活跃项目</p>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部Tab栏 -->
        <div class="tab-bar h-16 flex justify-around items-center bg-white border-t border-gray-200">
            <a href="home.html" class="tab-item flex flex-col items-center justify-center py-2 text-gray-600">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="nft_detail.html" class="tab-item flex flex-col items-center justify-center py-2 text-gray-600">
                <i class="fas fa-store text-xl"></i>
                <span class="text-xs mt-1">市场</span>
            </a>
            <a href="wallet.html" class="tab-item flex flex-col items-center justify-center py-2 text-gray-600">
                <i class="fas fa-solar-panel text-xl"></i>
                <span class="text-xs mt-1">我的资产</span>
            </a>
            <a href="exchange.html" class="tab-item flex flex-col items-center justify-center py-2 text-gray-600">
                <i class="fas fa-exchange-alt text-xl"></i>
                <span class="text-xs mt-1">兑换</span>
            </a>
            <a href="charity-projects.html" class="tab-item flex flex-col items-center justify-center py-2 text-green-600">
                <i class="fas fa-heart text-xl"></i>
                <span class="text-xs mt-1">公益</span>
            </a>
        </div>
    </div>

    <script>
        // Initialize and display an AMap (高德地图)
        let map = new AMap.Map('map', {
            zoom: 5,
            center: [104.1954, 35.8617] // China center coordinates [lng, lat]
        });

        // 添加地图控件
        map.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
            map.addControl(new AMap.ToolBar());
            map.addControl(new AMap.Scale());
        });

        // Add markers for charity project locations
        const charityProjects = [
            {
                name: '云南热带雨林保护',
                position: [102.7123, 25.0408],
                progress: '85%',
                participants: '1,234',
                content: '<div style="padding:10px;"><h3 class="font-bold">云南热带雨林保护</h3><p>进度: 85% | 参与人数: 1,234</p><p>预计年减排: 50,000吨CO₂</p></div>'
            },
            {
                name: '西北风电场建设',
                position: [103.8236, 36.0581],
                progress: '92%',
                participants: '2,156',
                content: '<div style="padding:10px;"><h3 class="font-bold">西北风电场建设</h3><p>进度: 92% | 参与人数: 2,156</p><p>预计年减排: 120,000吨CO₂</p></div>'
            },
            {
                name: '南海珊瑚礁修复',
                position: [113.2806, 23.1252],
                progress: '78%',
                participants: '987',
                content: '<div style="padding:10px;"><h3 class="font-bold">南海珊瑚礁修复</h3><p>进度: 78% | 参与人数: 987</p><p>预计年减排: 35,000吨CO₂</p></div>'
            },
            {
                name: '东北黑土保护',
                position: [126.5424, 45.8038],
                progress: '65%',
                participants: '756',
                content: '<div style="padding:10px;"><h3 class="font-bold">东北黑土保护</h3><p>进度: 65% | 参与人数: 756</p><p>预计年减排: 28,000吨CO₂</p></div>'
            },
            {
                name: '华北湿地恢复',
                position: [116.4074, 39.9042],
                progress: '88%',
                participants: '1,445',
                content: '<div style="padding:10px;"><h3 class="font-bold">华北湿地恢复</h3><p>进度: 88% | 参与人数: 1,445</p><p>预计年减排: 42,000吨CO₂</p></div>'
            }
        ];

        // Add markers to map
        charityProjects.forEach(project => {
            const marker = new AMap.Marker({
                position: project.position,
                title: project.name
            });
            
            marker.setMap(map);
            
            // Add info window
            const infoWindow = new AMap.InfoWindow({
                content: project.content,
                offset: new AMap.Pixel(0, -30)
            });
            
            // Bind click event
            marker.on('click', () => {
                infoWindow.open(map, marker.getPosition());
            });
        });

        // Function to handle NFT contribution
        function contributeToProject(projectType) {
            // Show contribution modal
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            modal.innerHTML = `
                <div class="bg-white rounded-2xl p-6 m-4 max-w-sm w-full">
                    <h3 class="text-xl font-bold text-gray-800 mb-4">贡献NFT收益权</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">贡献金额 (ETH)</label>
                            <input type="number" id="contributionAmount" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="输入贡献金额" min="1" max="1250">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">贡献期限</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                                <option value="3">3个月</option>
                                <option value="6">6个月</option>
                                <option value="12" selected>12个月</option>
                                <option value="24">24个月</option>
                            </select>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3">
                            <p class="text-sm text-gray-600">预期碳减排贡献</p>
                            <p class="text-lg font-bold green-text">约 <span id="estimatedReduction">50</span> 吨CO₂</p>
                        </div>
                    </div>
                    <div class="flex space-x-3 mt-6">
                        <button onclick="closeModal()" class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-semibold">取消</button>
                        <button onclick="confirmContribution('${projectType}')" class="flex-1 green-bg text-white px-4 py-2 rounded-lg font-semibold">确认贡献</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);

            // Update estimated reduction based on amount
            document.getElementById('contributionAmount').addEventListener('input', function(e) {
                const amount = parseFloat(e.target.value) || 0;
                const reduction = Math.round(amount * 0.4); // Simple calculation
                document.getElementById('estimatedReduction').textContent = reduction;
            });
        }

        // Function to close modal
        function closeModal() {
            const modal = document.querySelector('.fixed.inset-0');
            if (modal) {
                modal.remove();
            }
        }

        // Function to confirm contribution
        function confirmContribution(projectType) {
            const amount = document.getElementById('contributionAmount').value;
            if (!amount || amount <= 0) {
                alert('请输入有效的贡献金额');
                return;
            }
            
            // Simulate blockchain transaction
            alert(`成功贡献 ${amount} ETH 到${getProjectName(projectType)}项目！\n交易哈希: 0x${Math.random().toString(16).substr(2, 64)}`);
            closeModal();
            
            // Update UI (in real app, this would be updated from blockchain)
            setTimeout(() => {
                location.reload();
            }, 1000);
        }

        // Function to get project name
        function getProjectName(type) {
            const names = {
                'forest': '云南热带雨林保护',
                'wind': '西北风电场建设',
                'ocean': '南海珊瑚礁修复',
                'agriculture': '东北黑土保护'
            };
            return names[type] || '公益项目';
        }

        // Function to navigate to project details
        function navigateToProject(projectType) {
            alert(`正在跳转到${getProjectName(projectType)}项目详情页面...`);
            // In real app, this would navigate to project detail page
        }
    </script>
</body>
</html>